<template>
  <div class="photoinfo-container">
        <h5>{{ photoInfo.title }}</h5>
        <p>
            <span>发表时间：{{ photoInfo.add_time }}</span><span>点击：{{ photoInfo.click }}次</span>
        </p>
        <hr>
        <!-- 缩略图位置 -->
        <div class="smallPhotos">
            <img class="preview-img" v-for="(item,index) in smallPhotos" :src="item.src" height="100" @click="$preview.open(index,smallPhotos)" :key="item.src">
        </div>
        <div class="content" v-html="photoInfo.content"></div>
        <!-- 评论组件 -->
        <comment :id="id"></comment>
  </div>
</template>


<script>
import comment from '../subcomponents/comment.vue'
    export default{
        props:['id'],
        data(){
            return {
                photoInfo:{},
                smallPhotos:[]
            }
        },
        created(){
            this.getphotoinfo();
            this.getsmallPhoto();
        },
        methods:{
            //获取详情信息
           async  getphotoinfo(){
             const { data }= await  this.$http.get('/api/getimageInfo/'+this.id)
            //  console.log(data.message)
                if(data.status===0){
                    this.photoInfo=data.message[0]
                }
            },
            //获取图片的缩略图
            async getsmallPhoto(){
              const { data }=await  this.$http.get('/api/getthumimages/'+this.id)
            //   console.log(data.message)
              if(data.status===0){
                  data.message.forEach(item=>{
                      item.w=600;
                      item.h=600;
                  })
                  this.smallPhotos=data.message
              }
            }
        },
        components:{
            comment
        }
    }
</script>


<style lang="scss" scoped>
    h5{
        color: #26a2ff; 
        text-align: center;
        line-height: 35px;  
        font-weight:700;     
    }
    p{
        font-size:13px;
        display:flex;
        justify-content: space-between;
    }
    .photoinfo-container{
        padding: 3px;
    }
    .content{
        font-size:13px;
        line-height: 35px;
    }
    .smallPhotos{
        img{
            margin: 8px;
            box-shadow: 0 0 7px #666;
        }
    }
</style>
